真人之间的交流 - 通过手绘元素提升产品的个性与亲和力

这周天气状况很丰满，前面连下三天的雨，周六难得晴了一天，今天又阴晦肃杀了下来。

其实每篇开头这些碎碎念都是在译文做到尾声时根据当时的状况而写下的。这周的译文偏向视觉方面，具体说就是关于手绘手写风格的视觉元素在产品当中的运用方式的。刚刚做到最后“切莫滥用”的部分，就有朋友在微博上针对我零星发出的预告表达了自己的观点，挺好，那我也就顺便再唠叨两句。

对于类似这种“看多了索然无味，中文字的手绘效果识别度又很低，现在看到这样的新手帮助一律立即关掉”的评论，还有之前所收到的一些朋友包括一些“老师”的反馈，我要说的是叭，我挑来做翻译的英文原文，在我自己看来，多数是针对一些比较完美而理想的标准进行的方法论述或经验总结，然则每个团队每个产品所在的实际情况必然是不同的，作者将这些经验见解分享给我们，就是为了让大家在一个相对“正确”相对“理想”的方向上，根据各种实际因素进行调整而落实到实践中。理论陈述、经验分享、方法归纳，这些东西按照理想了来做是没问题的叭？能否以合适的方式加以吸收并以合适的方式运用在你自己的工作中，那是你们自己的问题好吗，亲？只要有点什么不错的设计思路，一群无脑产品就会立刻拿来一股脑的哪哪都给用上，这不是设计思路的问题而是人的问题好吗，亲？

就这样叭，不多聊了，还是那句话，我就是一玩家，我做我喜欢的东西，如果这些文章偏巧能对您的工作学习有帮助，那再好不过，如果不是这样，我也不会觉得有丝毫遗憾的。正文叭。

网站和移动产品身上的科技味道是与生俱来的，界面背后交织着各种代码脚本、信息、链接...这些复杂的数据与逻辑必须通过网页或应用的界面与用户进行互动，而设计师们的职责之一，就是想办法让这些“接口”更容易访问和使用，更像是给人用的。

有很多方法可以帮助设计师们“中和”掉产品身上的科技气息，其中最简单直白而卓有成效的就是打造更亲切友好、更有人情味儿的设计方案。这自然是关于“情感化设计”的话题，而本文则会重点讨论其中的一个方面，即手绘、手写和草图风格对产品个性及整体体验所能起到的提升作用。

个性与真实

手绘与草图风格的视觉元素是展现产品个性、传达真实效果的好方法。想象一下，当收到亲人或朋友寄来的信件或贺卡时，你希望里面的内容是对方手写的还是打印出来的？手写的信息无论到什么时候都比机器产出的更加亲切友好对叭？在网站和移动产品当中，这个道理同样有它的适用之处。虽然不是纸质，但我们仍可以让用户界面当中的内容看上去像是来自于真人之手，给用户带来更多真实可信的感觉。接下来我们一起看几个实际的产品范例。

形象与气质

首先是Balsamiq，他们的产品本身就是帮助设计师制作草图风格的原型的。

Balsamiq的功能非常强劲，不过它一直保持着非常“基础”的外观形象与气质，让设计师们可以找到使用纸和笔的感觉。一方面，我们可以通过它来打造低保真手绘风格的产出物，另外一方面，这个核心功能也使Balsamiq自身成为了一个具有独特形象和气质的产品。

品牌识别

手绘风格可以给图像带来独特的性格特征。人类特有的带有瑕疵的笔迹可以形成一种非常微妙的、机器难以复制的视觉张力，让浏览者不自觉的将注意力投入进来进行观察；相比之下，计算机绘制出的那些精确而完美的图形在如今反而成为了一种过于普通、难以吸引眼球的东西。

代码编辑器Notepad++就有一个很乖巧很有特色的手绘风格logo，里面的小变色龙象征着多种类型的代码，2乎乎的非常可爱，让人忍不住多看上几眼。另外，手绘风格同时也象征着用户通过这款产品做的事情的本质——从无到有的创造。这样一个logo会让用户牢牢的将Notepad++的品牌记在心里，而且很难与其它同类产品混淆。

个性

手绘和手写风格的元素可以让产品承载起强烈的个性，在用户与网站或移动应用之间建立起情感层面的关联。通过手绘风格表达出的内容可以让人感觉到其背后有真人存在；这里所说的“真人”，即包括产出内容的人，也包括用心打造内容表现形式的设计师们。让用户在使用产品的过程中潜移默化的感受到真切的人和人之间的交流，这对于提升产品的可信度及体验满意度是非常重要的。

MathBoard是一款帮助小孩儿练习算数的iPad应用。它的界面所模拟的是经典的黑板外观，输入及输出的内容都模仿了粉笔的效果。整个练习以解题为主要形式，小孩儿们在想不出来的时候还可以在左侧的黑板上直接进行书写演算。用户在这款产品中所能感受到的是真实的学习氛围，而不是冰冷枯燥的人机对话。

推荐阅读：为产品赋予人格 - 情感化设计的组成要素及实践案例

信息与内容

产品当中内容的呈现方式将决定着用户能否有效的获取和理解信息。要在恰当的时候，以足够抢眼的方式把用户的目光吸引过来；信息必须简单明了，与相关功能具有明确的关联，并且能够有效引导用户执行接下来的操作。在实际当中要做到这些其实不是件容易的事。下面我们来看几个通过手绘和草图效果来传达信息、引导用户的例子叭。

对功能进行诠释

作为设计师，我们对手绘草图在这方面的作用早已不陌生了。我们经常需要通过草图或故事板向团队其他成员展示想法，介绍设计方案；其实这种方法在很多时候同样可以用在实际产品当中。例如你有一个在概念和功能方面相对较新或是较为复杂的产品，那么不妨在介绍当中加入一些草图形式的视觉元素，更直观的向用户描述一些原本非常抽象的概念。这种方式可以给用户带来一种更加“私人化”的感觉，好像服务提供商或是设计师正在当面为他进行介绍讲解一样。

TestFlight(提供移动应用测试服务)在这方面做的很棒。你可以在他们的首页当中找到大量手绘草图风格的视觉元素，特别是在向开发者介绍其服务特色的地方，草图搭配简单文案的形式不仅能有效的吸引浏览者的注意力，而且非常直观易懂。

可视化的展示流程

与之前的一点类似，我们同样可以使用手绘草图向用户展示产品的功能流程。实际上，要在产品或服务中提供完美的解决方案是很难的，如果能够以更加坦诚和友好的姿态展示出一些复杂方案所涉及到的流程，即使它们看上去并不流光溢彩，却可以让用户感受到一份真实可信。

设计师兼前端开发者Alex Faure在他的网站中通过手绘风格的视觉元素搭配文案向访问者展示了网站设计开发服务当中的重要流程步骤，给人的感觉便是非常用心，值得信任，仿佛不仅是他本人精通于提供这项服务，而且他很乐于让潜在用户也一起参与到整件事的流程当中进行沟通互动。

引导用户

无论设计网站还是移动应用，设计师们都要时刻考虑到用户当前所处的操作环节，提供必要的引导以帮助他们顺利完成目标。(推荐阅读：具有引导性的移动应用界面设计模式)

在这方面，手绘风格的图标也是你可以考虑使用的设计元素。当然，大家都知道图标在界面设计当中的重要性，那么手绘风格的有什么不同呢？和前文所述的道理类似，我们通常所使用的那些图标固然更加漂亮，充满细节，但越是精致的图标，越会给人一种“软件制造”的感觉，而手绘风格则显得更加个人化，更具亲和力，能给用户带来一种真人交流的感觉。多数人更加倾向于接受真人的指引与帮助，而不是机器。

iPhone应用Stamped使用了非常漂亮而且含义准确的手绘风格图标来引导用户。该应用本身就是基于真实人类之间的分享交流的，而手绘风格的视觉元素则在“人情味”方面又锦上添了个花。

人物介绍

无论是新创企业，还是工作室、自由设计师，如今大家都越发看重团队或个人的介绍页面。站在用户的角度讲，人们也更加希望了解某个网站产品或应用服务背后的那些真实的人。一个简单的“联系我们”已然不够了，人们希望知道他们能联系的到底是谁。你所做的介绍越个人化，人们就会越发的信任你。

令人喜爱

能否做到让人喜爱是很关键的。如果人们感觉到了你的傲慢无礼，那么即使你提供的个人信息再详细也是毫无意义的，人们总是更乐于相信那些他们喜欢的人。在介绍信息当中使用手绘元素，这可以让个人或团队的形象更具亲和力，看上去更生动、更富创意、容易相处。

The Knock Knock Factory在这方面做的不错。上图是关于他们“无所畏惧的leader”Keith的个人介绍，其中粉笔画一样的手绘图形很简约而全面的展示了此人的能力特质。这种视觉表现形式，包括诙谐的文案在内，都向访问者展示了一幅非常清晰的画面，让他们了解到在这里要和怎样的人打交道，同时感受到一种积极的态度。这种更加个人化的情感连接可以让访问者觉得自己在这里是被欢迎的。

可信

在互联网世界当中，要掩盖自己的真实身份、躲藏在网站的某个角落里是很容易的。正因为这样，向访问者或客户坦诚的展示自己才能赢得更多的信任。人们只有信任你，才会按照你所做出的引导去产生实际行动，例如使用你们的服务或是购买产品。手绘风格的内容元素肯定不是最容易设计和产出的，它所需要的是包括设计师在内的所有团队成员的创意与激情；但也正是这些创意与激情可以更加直白有效的将“诚挚”与“可信”的感觉带给潜在客户。

Polecat在团队介绍当中花了不少心思，他们为每个成员都制作了手绘插画风格的头像，虽然看上去略显粗糙，但表现出了他们诚挚的用心。

真实

真实是“信任”当中至关重要的元素，你不能让访问者产生“这里是否有真实团队存在”的顾虑。网站产品带给用户的不安全感是与生俱来的，只是程度问题。用户知道自己很可能永远不会接触到产品背后的真人，所以你可以试着在一些细节的地方展示“真人思考的印迹”，例如字体。任何网站都可以使用大家习以为常的Web字体，而你可以在合适的地方尝试一些手写风格的字体，制造一点点差异，让人感到更平实亲切。

Grove的家伙们在创意、趣味和真实之间找到了比较完美的平衡点。他们将团队成员的照片处理成宝丽来的外观，同时用手写体标注了每个人的名字，看上去就像是一个访客溜达进他们的工作区给每个人(包括狗狗)拍了一张照片一样，很有代入感。

讲故事

“讲故事”是一种非常传统而且个人化的信息沟通方式，可以在情感上给我们带来安全舒适的感觉。通过手绘草图给用户讲讲产品的故事，这可以让他们暂时忘掉产品自身的科技属性，从而更容易产生亲和感。

娱乐化

娱乐化的方式可以非常容易的让人们产生参与感。通过手绘草图或漫画的形式陈述产品特色或相关的概念，让人们在轻松愉悦的状态下自主的开始了解你的产品。

Axure在他们的首页给访问者们带来了UX Man的故事，手绘风格非常吸引眼球。无疑，为了打造这样有趣精彩的页面，他们的团队一定花了很多功夫。

解释说明

手绘风格相比于普通的视觉元素来说可以更加直接的触及到用户的情感层面，使他们愿意更主动的发现并吸收信息。

SignNow在首页介绍中使用了手绘插画来说明这款应用可以满足用户的哪些需求、帮他们解决怎样的问题。看到这样的图画，潜在客户们几乎可以立刻联想到自己在实际当中遇到的麻烦。一旦产生了需求上的共鸣，他们就会跟随着你的介绍和引导，主动投入到对产品的深入了解当中。

激发兴趣

人性化、个性化的视觉元素可以激发访问者的兴趣，而被唤起兴致的用户是最乐于接受相关信息的。

旅行类应用ToristEye通过手绘故事的方式有效的激发了潜在用户的兴趣。他们将自己的产品放在一个冒险故事当中，一步一步的引领用户在故事营造的需求情境中了解这款应用。即使去掉说明文案，这套故事图片仍然可以展示出产品的大致功能以及背后体现出的自由之旅精神。

吸引目光

手绘元素之所以能够吸引目光，主要原因是人们更乐于在环境中发现不同，具体的说也就是在Web或移动产品的界面中发现“人类元素”。我们早已习惯了各种中规中矩的直线和对称的布局，这种情况下，手绘和手写风格的元素可以在很短的时间内让用户将注意力集中过来。

邀请

我们可以运用这一原理与用户进行沟通，例如邀请引导他们执行某些特定的操作，常见的包括注册、下载、分享等等。相比于冰冷而机械化的引导文案，人们更乐于对这种看上去非常个人化的信息做出回应。

Weezbe就是这样做的。相关的介绍文案使用了手写风格，一个大大的箭头指向着绿色操作按钮。此外他们还画了一个笑脸，随意而粗糙却让人觉得轻松愉悦。

提示

利用手绘元素所产生的吸引力，及其能够激发人们好奇心的能力，向用户介绍界面的操作方法，这也是一种很常见的方式。

Radley Yeldar使用了一个非常简洁的用来表示“点击”的手绘图形，配合“这里不仅是页脚”的文案，简洁却有力的激发了访问者的好奇心。

ZURB在介绍他们的jQuery幻灯片插件时所使用的这种提示方法也是我们能在越来越多的产品当中见到的。(我们曾经介绍过ZURB的一个重要产品，"Foundation框架 - 快速创建跨平台的网站页面原型")

相关阅读：通过合理的指示元素引导用户发现隐藏内容

切莫滥用

手绘手写风格并不是在所有的地方都适用。确保不要滥用，毕竟我们使用手绘手写风格的目的就是利用它们所产生的视觉和心理上的差异性，利用它们的稀缺所带来的“个人化”、“真实化”的感受；如果产品当中到处都是这样的元素，那显然会失去意义。看看下面的例子，这完全是毫无意义、充满视觉噪音的运用方式，不仅吓人，而且即使用户希望进行操作，也很容易被干扰而点击到错误的位置。